<!--
 * @Descripttion: 
 * @version: 
 * @Author: dudu
 * @Date: 2020-03-04 10:08:26
 * @LastEditors: dudu
 * @LastEditTime: 2020-03-06 10:16:03
 -->
 <template>
  <div class="cus-table">
    <el-table :data="data"
              :height="currentConfig.tableHeight"
              :highlight-current-row="currentConfig.showCurrentRow"
              @selection-change="handleSelectionChange"
              @current-change="handleRowChange"
              :sortable="currentConfig.sortable"
              v-loading="currentConfig.showLoading&&loading"
              size="mini"
              stripe
              border
              ref="mainTable"
              style="width: 100%">
      <el-table-column type="selection"
                       v-if="currentConfig.showSelection"
                       width="55">
      </el-table-column>
      <elTableColumn v-if="currentConfig.showIndex"
                     type="index"
                     label="序号"
                     width="50" />
      <template v-for="(item,index) in columns">
        <el-table-column :key="index"
                         sortable
                         :label="item.name"
                         :minWidth="item.width"
                         :prop="item.code">
          <template slot-scope="scope">
            <!-- 弹窗按钮 -->
            <el-input v-if="item.type==='dialogInput'"
                      size="mini"
                      disabled
                      :placeholder="item.config.placeholder"
                      v-model="scope.row[item.code]">
              <el-button slot="append"
                         icon="el-icon-search"
                         @click="handleShowDialog(scope.row)"></el-button>
            </el-input>
            <!-- 下拉 -->
            <el-select v-else-if="item.type==='select'"
                       size="mini"
                       v-model="scope.row[item.code]"
                       :placeholder="item.config.placeholder">
              <el-option v-for="(_item,_index) in item.config.options"
                         :key="_index"
                         :label="_item.name"
                         :value="_item.code">
              </el-option>
            </el-select>
            <!-- 按钮组 -->
            <el-radio-group v-else-if="item.type==='radio'"
                            v-model="scope.row[item.code]">
              <el-radio :label="_item.code"
                        v-for="(_item,_index) in item.config.options"
                        :key="_index">{{_item.name}}</el-radio>
            </el-radio-group>
            <!-- 日历 -->
            <el-date-picker v-else-if="item.type==='datePicker'"
                            v-model="scope.row[item.code]"
                            size="mini"
                            type="datetime"
                            :placeholder="item.config.placeholder">
            </el-date-picker>
            <!-- 输入框 -->
            <el-input v-else-if="item.type==='input'"
                      size="mini"
                      v-model="scope.row[item.code]"
                      :placeholder="item.config.placeholder"></el-input>
            <!-- 文本 -->
            <span v-else> {{scope.row[item.code]}}</span>
          </template>
        </el-table-column>
      </template>
      <elTableColumn label="操作"
                     v-if="currentConfig.showAction"
                     :min-width="currentConfig.actions.length < 3
              ? 160
              : 70 * currentConfig.actions.length"
                     fixed="right">
        <template slot-scope="scope">
          <slot name="action"
                :row="scope.row"></slot>
        </template>
      </elTableColumn>
    </el-table>
    <el-pagination v-if="currentConfig.showPagination && data.length"
                   :layout="currentConfig.layout"
                   :total="total"
                   :pageSize="currentConfig.pageSize"
                   @current-change="handlePageChange"
                   :currentPage="currentConfig.currentPage" />
  </div>
</template>
 
 <script>
const defaultConfig = {
  showIndex: false,
  pageSize: 10,
  currentPage: 1,
  layout: 'total,prev, pager, next, jumper',
  showPagination: true,
  showSelection: false,
  showCurrentRow: false,
  showLoading: true
}

export default {
  name: 'cusTable',
  props: {
    config: {
      type: Object,
      default: () => { }
    },
    data: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      defaultConfig
    };
  },
  computed: {
    currentConfig () {
      return {
        ...this.defaultConfig,
        ...this.config,
      }
    },
  },
  methods: {
    handlePageChange (page) {
      this.$emit('currentPageChange', page)
    },
    handleSelectionChange (val) {
      this.$emit('selectionChange', val)
    },
    handleShowDialog (row) {
      this.$emit('showDialog', row)
    },
    handleRowChange (row) {
      this.$emit('currentRowChange', row)
    }
  }
}
 </script>
 <style>
.cus-table {
}
</style>
